<template>
  <div class="home">
    <div class="container">
      <div class="header">
        <img src="@/assets/image/header.png" alt="header">
        <img class="qrcode" src="@/assets/image/qrcode.png" alt="瘦疗">
      </div>
      <div class="main relative">
        <img src="@/assets/image/main.png" alt="phone_bg">
        <div class="absolute first">
          首页功能:顶部自定义头像及体脂秤设备管理，数据展示区:体重、数据对比、BM1、体脂率、肌肉率;卡片列表展示:一周体重变化趋势、目标体重;首页展示商城特价产品，轮播展示;健康功能展示，包括:水分、蛋白质、骨量、内脏脂肪、基础代谢率、体脂指数、脂肪重量、肥胖级别、身体年龄、去脂体重、体型。直观展示出身体各项指标数据，为用户减重提供帮助。
        </div>
        <div class="absolute second">
          商城基本能够满足用户的日常购物需求诸如商品浏览、商品查找、商品购买、特价商品、个人订单、客服咨询，还可以在好轻APP上购买自己需要的运动装备及其他相关健康产品。帮助用户实现个人健康管理，达到科学、轻松、健康的减脂目标。
        </div>
        <div class="absolute third">
          瘦疗APP是一款集体重管理、减脂食谱、减重知识、食物热量为一体的科减减脂APP。在减脂过程中，智能体脂秤将为用户提供每日精准体脂数据测量，减脂食谱的为用户提供科学的减脂食谱指导服务，食物热量包含大量的食物说明与热量、数据真实有效，并保持实时更新。瘦疗APP是您的减脂和营养小帮手，让您减脂更科学、饮食更合理、生活更健康。
        </div>
      </div>
      <div class="tools">
        <div class="title">HEALTHTOOLS</div>
        <div class="label">健康工具</div>
        <div class="lis">
          <div class="items" v-for="item in list" :key="item.id">{{ item.name }}</div>
        </div>
      </div>
      <div class="footer">
        <div class="top">
          <p class="eng-title">ABOUT US</p>
          <p class="label">信赖的科学健康减肥专家</p>
        </div>
        <p class="about-text">关于我们</p>
        <div class="content">
          <img src="@/assets/image/logo.png" class="logo" alt="瘦疗">
          <div class="right">
            <div class="title">公司联系电话</div>
            <h1>400-609-9920</h1>
            <p class="text">
              湖南轻奈健康咨询管理有限公司，总部位于湖南省长沙市，从事大健康行业深耕多年，拥有成熟的研发团队与资深营养师团队，专注于服务全国广大女性用户群体，提供健康科学的身形体态管理，与营养知识建议，助力每一位女性用户完成蜕变成为更美好的自己。且公司与杭州娃哈哈等国民品牌均保持高水平的深度合作与技术交流，致力于打造一个共同向往的商业愿景。企业保持高增速发展，现有员工200~500人，服务用户1000W+，诚挚欢迎和邀请更多优秀人才的加入与合作，共襄盛世。
            </p>
          </div>
        </div>
        <div class="record">
          <p>Copyright 湖南瘦疗健康科技有限公司 版权所有</p>
          <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">湘ICP备2025126224号-1</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="Home">
import { reactive } from 'vue'

const list = reactive([
  { id: 1, name: 'BMI(身体质量指数)' },
  { id: 2, name: '脂肪率' },
  { id: 3, name: '肌肉率' },
  { id: 4, name: '内脏脂肪' },
  { id: 5, name: '基础代谢率' },
  { id: 6, name: '肥胖等级' },
  { id: 7, name: '健康评分' },
  { id: 8, name: '更多请在APP查看' },
])
</script>

<style lang="scss" scoped>
.home {
  background: #fff;
}

img {
  width: 100%;
}

.header {
  position: relative;

  .qrcode {
    width: 150px;
    height: 150px;
    position: absolute;
    right: 77px;
    top: 139px;
    z-index: 9;
  }
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  color: #333;
  font-size: 16px;
  line-height: 24px;
  width: 26%;

  &.first {
    top: 20%;
    left: 55px;
  }

  &.second {
    bottom: 255px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
  }

  &.third {
    top: 200px;
    right: 77px;
  }
}

.tools {
  background-color: #fff;
  margin: 60px 0;
  padding-left: 100px;

  .title {
    font-size: 50px;
  }

  .label {
    font-size: 30px;
    margin: 10px 0 50px;
  }

  .lis {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;

    .items {
      width: 20%;
      background: #0CC4C4;
      color: #fff;
      text-align: center;
      padding: 30px 40px;
      margin: 8px;
      border-radius: 6px;
      font-size: 20px;

      &:nth-child(1) {
        width: 26%;
      }

      &:nth-child(2) {
        width: 18%;
      }

      &:nth-child(3) {
        width: 20%;
      }

      &:nth-child(4) {
        width: 22%;
      }

      &:nth-child(5) {
        width: 22%;
      }

      &:nth-child(6) {
        width: 14%;
      }

      &:nth-child(7) {
        width: 24%;
      }

      &:nth-child(8) {
        width: 30%;
        background: #000;
      }
    }
  }
}

.footer {
  background: #000;
  color: #fff;
  padding: 50px 100px;

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .eng-title {
      font-size: 50px;
    }
  }

  .about-text {
    font-size: 20px;
    margin-top: 16px;
  }

  .content {
    margin-top: 100px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .logo {
      width: 50px;
      height: 50px;
      border-radius: 10px;
    }

    .right {
      width: 36%;

      h1 {
        margin: 8px 0 20px;
        font-size: 50px;
      }

      .text {
        font-size: 14px;
        line-height: 24px;
      }
    }
  }
}

.record {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  font-size: 14px;

  a {
    width: 36%;
    color: #fff;
  }
}
</style>
